<template>
  <div v-if="state.length > 0">
    <div v-for="item in state" :key="item.id">
      <div>
        <videom :code="item" class="h-full" />
      </div>
      <div>{{ item.camName }}</div>
      <div>
        <a-pagination
          :total="total"
          :page-size="searchFormData.pageSize"
          :current="searchFormData.pageNo"
          @change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useState } from "../hooks/useState";
import { useAsyncState } from "@vueuse/core";
import { to } from "await-to-js";
const props = defineProps<{
  properties: any;
}>();
const total = ref(0);

const [searchFormData] = useState<{
  pageNo: number;
  pageSize: number;
  firmName: string;
}>(() => ({
  pageNo: 1,
  pageSize: 2,
  firmName: props.properties.firmName,
}));

const { state, execute, loading } = useAsyncState(
  async () => {
    const [res, err] = await to(getVideoList(searchFormData.value));
    total.value = res.data.total;

    return res.data.records;
  },
  [] as any,
  { immediate: true, resetOnExecute: true }
);

const handlePageChange = (page: number, pageSize: number) => {
  searchFormData.value.pageNo = page;
  searchFormData.value.pageSize = pageSize;
  execute();
};
</script>

<style></style>
